<template>
    <div class="userIcon">
        <el-popover placement="bottom" :width="100" class="popover" trigger="click">
            <template #reference>
                <img src="@/assets/icon/user.png" alt="" class="user" />
            </template>
            <div class="user-detail">
                <h2 class="username">{{ (userData && (userData as any).username) || '' }}</h2>
                <ul class="list">
                    <li class="item" @click="Jump(item.path)" v-for="item in linkList" :key="item.name">{{ item.name }}</li>
                    <li class="item" @click="logout">退出登录</li>
                </ul>
            </div>
        </el-popover>
    </div>
</template>

<script setup lang="ts">
import { useUserStore } from "../store/index"
import { storeToRefs } from "pinia"
import { useRouter } from "vue-router"
// @ts-ignore
import { ElMessageBox, ElMessage } from 'element-plus'
import { ref } from "vue"
const userStore = useUserStore()
const { userData } = storeToRefs(userStore)
const router = useRouter()
const linkList = ref([
    {
        name: "观影记录",
        path: "/history"
    },
    {
        name: "我的喜欢",
        path: "/favourite"
    },
    {
        name: "我的收藏",
        path: "/collect"
    }
])

function Jump(path: string) {
    router.push(path)
}

function logout() {
    ElMessageBox.confirm(
        '确认要退出登录嘛',
        '退出',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '退出成功',
            })
            localStorage.clear()
            router.push("/login")
        })
        .catch(() => {
        })

}

</script>
<style lang="scss" scoped>
.userIcon {
    margin: 0 0 0 40px;

    .user {
        width: 30px;
        cursor: pointer;
    }


}

.user-detail {
    .username {
        text-align: center;
        border-bottom: 1px solid rgba($color: #000000, $alpha: 0.7);
        padding: 0 0 10px 0;
        margin: 0 0 10px 0;
    }


    .list {
        list-style: none;

        .item {
            $height: 40px;
            height: $height;
            line-height: $height;
            cursor: pointer;
            padding: 0 15px;
            border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
            border-radius: 5px;

            &:last-child {
                border: none;
            }

            &:hover {
                background-color: #BAD7D9;
                color: #333;
            }


        }
    }
}
</style>